<template>
  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" label-position="top" class="goodForm">
      <div class="content-title">{{ $t('menuStr.edpsAuthorizationStr') }}</div>
      <el-form-item>
        <template #label>
          <div class="form-label">
            <span>{{ $t('pageStr.machCodeExportStr') }} </span>
            <span> ( {{ $t('pageStr.machCodeExportDesStr') }} )</span>
          </div>
        </template>
        <el-button class="mt-10 default-btn" @click="handleExport" :loading="isLoading">
          {{ $t('tabsStr.exportStr') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <template #label>
          <div class="form-label">
            <span>{{ $t('pageStr.authFileImportStr') }}</span>
            <span> ( {{ $t('pageStr.authFileImportDesStr') }} )</span>
          </div>
        </template>
        <file-upload url="/protocol/import_authfile" accept=".kylic" :btn-label="$t('tabsStr.importStr')"
                     @uploadSuccess="onUploaded"/>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import FileUpload from '@/components/Upload/index.vue'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'
import {downloadFile,permissionDisabled} from "@/utils";
import {ref} from 'vue'
const isLoading = ref(false)
const {t} = useI18n()


/**
 * 上传成功后的事件回调
 */
function onUploaded(data) {
  console.log('上传完成的回调', data)
  if (data.importInfo == 'error') {
    ElMessage.error(t('errorTip'))
  } else {
    ElMessage.error(t('successTip'))
  }
}

/**
 * 导出按钮点击
 */
function handleExport() {
  isLoading.value = true
  downloadFile('/protocol/export_machcode','auth_file.kylic').finally(() => {
      isLoading.value = false
  })
}
</script>

<style scoped>
.form-label span:nth-child(2) {
  color: #717289;
}

.form-label {
  font-size: 14px;
  color: #161940;
}

.content-title {
  padding-bottom: 15px;
  font-family: "Microsoft YaHei";
  font-size: 17px;
  color: #161940;
  font-weight: bold;
}
</style>